<script>
export default {
  name: "orderOrder",
  data() {
    return {
      activeState: this.$route.query.state,
      listData: [
        {
          time: '2023-12-30 22:40:36',
          status: 3,
          product: [
            {
              name: '小米 Xiaomi Book Pro 14 2022 锐龙版 2.8K超清大师屏 高端轻薄笔记本电脑',
              pic: 'http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20221028/xiaomi_computer_001.jpg',
              type: '颜色:新小米Pro 14英寸 2.8K屏;版本:R7 16G 512; x 1',
              price: '5999.00'
            },
            {
              name: '小米12 Pro 天玑版 天玑9000+处理器 5000万疾速影像 2K超视感屏 120Hz高刷 67W快充',
              pic: 'http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20221104/xiaomi_12_pro_01.jpg',
              type: '颜色:黑色;容量:128G; x 1',
              price: '2999.00'
            }
          ],
          price: 8698,
          num: 2,
          evaluate: false,
          textStatus: '交易完成'
        },
        {
          time: '2023-12-30 22:40:55',
          status: 2,
          product: [
            {
              name: '小米 Xiaomi Book Pro 14 2022 锐龙版 2.8K超清大师屏 高端轻薄笔记本电脑1',
              pic: 'http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20221028/xiaomi_computer_001.jpg',
              type: '颜色:新小米Pro 14英寸 2.8K屏;版本:R7 16G 512; x 1',
              price: '5999.00'
            },
            {
              name: '小米12 Pro 天玑版 天玑9000+处理器 5000万疾速影像 2K超视感屏 120Hz高刷 67W快充2',
              pic: 'http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20221104/xiaomi_12_pro_01.jpg',
              type: '颜色:黑色;容量:128G; x 1',
              price: '2999.00'
            }
          ],
          price: 8698,
          num: 2,
          evaluate: false,
          textStatus: '等待收货'
        }
      ],
    }
  }
}
</script>

<template>
  <van-tabs v-model="activeState">
    <van-tab title="全部" name="-1">
      <div style="padding: 0 15px;margin-top: 8px;background-color: white" v-for="item in listData" :key="item.product.name">
        <div class="header" style="display: flex;align-items: center;position: relative;height: 40px">
          <div style="font-size: 14px;color: #303133;flex: 1">{{item.time}}</div>
          <div style="font-size: 14px;color: #fa436a">{{item.textStatus}}</div>
          <van-icon v-if="item.status !== 2" class="icon-diy" name="delete-o" color="#909399" size="16" style="padding: 5px 0 5px 18px" />
        </div>
        <van-card
            style="padding: 0;background-color: white"
            v-for="p in item.product"
            :key="p.name"
            :price="p.price"
            :desc="p.type"
            :title="p.name"
            :thumb="p.pic"
        />
        <div style="display: flex;justify-content: end;font-size: 13px;color: #909399;align-items: baseline;margin-top: 10px;border-bottom: 1px #e4e7ed solid;padding-bottom: 10px">
          共<span style="color: black;padding: 0 2px">{{item.num}}</span>件商品 实付款 <span style="color: black;">￥{{item.price}}</span>
        </div>
        <div style="padding: 10px 0;display: flex;justify-content: end">
          <div v-if="item.status === 3">
            <van-button color="#fa436a" round >立即评价</van-button>
          </div>
          <div v-if="item.status === 2">
            <van-button type="default" round >查看物流</van-button>
            <van-button color="#fa436a" round style="margin-left: 10px">确认收货</van-button>
          </div>
        </div>

      </div>
    </van-tab>
    <van-tab title="待付款" name="0">内容 2</van-tab>
    <van-tab title="待收货" name="1">内容 3</van-tab>
    <van-tab title="已完成" name="2">内容 3</van-tab>
    <van-tab title="已取消" name="3">内容 3</van-tab>
  </van-tabs>
</template>

<style scoped>
.header:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-bottom: 1px #e4e7ed solid;
}
.icon-diy:after{
  position: absolute;
  content: '';
  width: 0;
  left: 10px;
  border-left: 1px solid #dcdfe6;
  height: 15px;
}
</style>